<template>
  <div class="app-container">
    <el-container>
      <el-header>
        创建活动
      </el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-container class="content">
              <el-aside width="53px" class="box-left one">新</el-aside>
              <el-main class="main-box">
                <h1 class="main-box-h1">新客立减</h1>
                <h1 class="main-box-h1">拉新</h1>
                <!--<h2>立即创建</h2>-->
                <el-button size="mini" class="main-box-btn" @click="maskBox(1)">立即创建</el-button>
              </el-main>
            </el-container>
          </el-col>
          <el-col :span="8">
            <el-container class="content">
              <el-aside width="53px" class="box-left two">减</el-aside>
              <el-main class="main-box">
                <h1 class="main-box-h1">满减活动</h1>
                <h1 class="main-box-h1">引流&促销</h1>
                <!--<h2>立即创建</h2>-->
                <el-button size="mini" class="main-box-btn" @click="maskBox(2)">立即创建</el-button>
              </el-main>
            </el-container>
          </el-col>
          <el-col :span="8">
            <el-container class="content">
              <el-aside width="53px" class="box-left three">折</el-aside>
              <el-main class="main-box">
                <h1 class="main-box-h1">折扣商品</h1>
                <h1 class="main-box-h1">引流&促销</h1>
                <!--<h2>立即创建</h2>-->
                <el-button size="mini" class="main-box-btn">立即创建</el-button>
              </el-main>
            </el-container>
          </el-col>
        </el-row>
      </el-main>
    </el-container>

    <el-container>
      <el-header>
        活动列表
      </el-header>
      <el-main>
        <el-table
          v-loading="loading"
          element-loading-text="Loading"
          highlight-current-row
          row-class-name="ele-table-row"
          :data="tableData"
          style="width: 100%">
          <el-table-column label="序号" width="60">
            <template slot-scope="scope">
              {{scope.$index + 1 + 10 * (page.number - 1)}}
            </template>
          </el-table-column>
          <el-table-column label="活动名称" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <!--{{scope.row.}}-->
              <span v-if="scope.row.type === 2">新客立减</span>
              <span v-if="scope.row.type === 1">满减活动</span>
            </template>
          </el-table-column>
          <el-table-column label="活动状态" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <!--{{scope.row.status}}-->
              <span v-if="scope.row.status === 2">进行中</span>
              <span v-if="scope.row.status === 3">未进行</span>
            </template>
          </el-table-column>
          <el-table-column label="开始日期" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.beginTime}}
            </template>
          </el-table-column>
          <el-table-column label="结束日期" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.endTime}}
            </template>
          </el-table-column>
          <!--<el-table-column label="活动内容" min-width="100" show-overflow-tooltip>-->
            <!--<template slot-scope="scope">-->
              <!--&lt;!&ndash;{{scope.row.}}&ndash;&gt;-->
            <!--</template>-->
          <!--</el-table-column>-->
          <el-table-column label="操作" width="240" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button size="mini" @click="showDetail(scope.row)">查看</el-button>
              <el-button type="danger" plain size="mini" @click="pass(scope.row.id, 3)" v-if="scope.row.status === 2">
                下架
              </el-button>
              <el-button type="primary" plain size="mini" @click="pass(scope.row.id, 2)" v-if="scope.row.status === 3">
                上架
              </el-button>
              <el-button type="danger" plain size="mini" @click="del(scope.row.id)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :total="page.total">
        </el-pagination>
      </el-main>
    </el-container>

    <el-dialog
      title="活动信息"
      :visible.sync="dialogVisible"
      width="40%">
      <el-form label-width="120px" size="small" :model="time" :rules="rules" ref="form">
        <el-form-item label="活动开始日期" prop="beginTime">
          <el-date-picker
            v-model="time.beginTime"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择开始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="活动结束日期" prop="endTime">
          <el-date-picker
            v-model="time.endTime"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="门店新客立减" v-if="showIndex === 2">
          <el-input v-model="time.reduce" style="width: 80px;"></el-input>
        </el-form-item>
        <el-form-item label="满减优惠" v-else-if="showIndex === 1">
          满&nbsp;&nbsp;<el-input v-model="time.enough" style="width: 80px;"></el-input>&nbsp;&nbsp;元&nbsp;&nbsp;&nbsp;&nbsp;
          减&nbsp;<el-input v-model="time.reduce" style="width: 80px;margin-left: 5px"></el-input>&nbsp;&nbsp;元
        </el-form-item>
        <!--<div v-if="showIndex === 2">如已存在新客立减活动，则该次操作将会替换之前活动</div>-->
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="hiddenMaskBox('form')">取 消</el-button>
    <el-button type="primary" @click="submit('form')">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import { page } from '@/mixins/page'
  import { activity_page, activity_add, activity_del, activity_change, activity_status } from '@/api/index'

  export default {
    mixins: [page],
    data() {
      return {
        loading: true,
        dialogVisible: false,
        tableData: [],
        time: {},
        showIndex: 0,
        projectId: 0,
        rules: {
          beginTime: [
            { required: true, message: '请选择时间', trigger: 'change' }
          ],
          endTime: [
            { required: true, message: '请选择时间', trigger: 'change' }
          ],
          reduce: [
            { required: true, message: '请输入', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      maskBox(index) {
        // console.log(this.$refs['form'], 77)
        // if (this.$refs['form'] === undefined) {
        //   this.$refs['form'].resetFields()
        // }
        this.time = {}
        this.dialogVisible = true
        if (index === 1) {
          this.showIndex = 2
          this.time.enough = 0
        } else if (index === 2) {
          this.showIndex = 1
        }
      },
      hiddenMaskBox(form) {
        this.dialogVisible = false
        if (!this.dialogFormVisible) {
          this.$refs[form].resetFields()
        }
      },
      del(id) {
        const params = {
          id: id
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          activity_del(params).then(res => {
            // console.log(res)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getInfo()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      pass(id, val) {
        const params = {
          id: id,
          content: { status: val }
        }
        let text = ''
        if (val === 2) {
          text = '上架'
        } else if (val === 3) {
          text = '下架'
        }
        this.$confirm(`确定要${text}吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          activity_status(params).then(res => {
            this.dialogVisible = false
            // console.log(res)
            this.$message({ type: 'success', message: '操作成功' })
            this.getInfo()
            // this.$router.go(-1)
          })
        }).catch(() => {
          console.log('cancel pass')
          // this.$message({ type: 'warning', message: '放弃操作' })
        })
      },
      getInfo() {
        activity_page(this.page).then(res => {
          console.log(res)
          this.tableData = res.content
          this.page.total = res.totalElements
          this.loading = false
        })
      },
      showDetail(row) {
        this.time = {}
        this.dialogVisible = true
        if (row.type === 1) {
          this.showIndex = 1
        } else if (row.type === 2) {
          this.showIndex = 2
          this.time.enough = 0
        }
        this.projectId = this.showIndex
        this.time = row
      },
      submit(formName) {
        if (this.showIndex === 2) {
          if (!this.time.reduce) {
            this.$message({ type: 'warning', message: '请输入新客立减' })
            return
          }
        } else if (this.showIndex === 1) {
          if (!this.time.enough || !this.time.reduce) {
            this.$message({ type: 'warning', message: '请输入满减' })
            return
          }
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.projectId) {
              const params = {
                id: this.time.id,
                content: this.time
              }
              activity_change(params).then(res => {
                console.log(res)
                this.$message({ type: 'success', message: '修改成功' })
                this.getInfo()
                this.dialogVisible = false
              })
            } else {
              this.time.type = this.showIndex
              activity_add(this.time).then(res => {
                console.log(res)
                this.$message({ type: 'success', message: '添加成功' })
                this.getInfo()
                this.dialogVisible = false
              })
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    },
    mounted() {
      this.getInfo()
    }
  }
</script>

<style src="./index.scss" lang="scss" scoped></style>
